/**
 * @author : 乔磊磊
 * @ide    : WebStorm
 * @date   : 2025/2/18 星期二 21:54
 * @desc   : UI按钮，点击时播放音效
 */
import {_decorator, AudioClip, Button, Color, Node, Sprite} from "cc"
import {getAudionMgr,AudioMgr} from "../audio";
import {ISpriteColorMapping} from "./ISpriteColorMapping";

const {ccclass, property, menu, disallowMultiple} = _decorator
@ccclass("UIAudioBtn")
@menu("UI/UIAudioBtn")
@disallowMultiple(true)
export class UIAudioBtn extends Button {
    @property({group: {name: "UnEnableColor", id: "1", style: "tab"}, tooltip: "禁用时的颜色",})
    public unEnableColor: Color = new Color(255, 255, 255)

    @property({group: {name: "Audio", id: "2", style: "section"},})
    private playAudioOnTouchStart: boolean = false

    @property({group: {name: "Audio", id: "2", style: "section"}, tooltip: "音效，留空就用默认音效", type: AudioClip,})
    private effect: AudioClip = null!

    private _cacheMapping: ISpriteColorMapping[] = []

    get interactable() {
        return this._interactable
    }

    set interactable(value: boolean) {
        if (this._interactable === value) {
            return
        }

        this._interactable = value
        this._updateState()

        if (!this._interactable) {
            this._resetState()
        }

        this.setGrayscale()
    }

    protected onLoad() {
        this._cacheSprites()
    }

    protected start() {
        this.node.on(Node.EventType.TOUCH_START, this.touchStart, this)
        this.node.on(Node.EventType.TOUCH_END, this.touchEnd, this)
        this.setGrayscale()
    }

    private touchStart() {
        if (!this.interactable) return
        if (!this.playAudioOnTouchStart) return
        getAudionMgr().playBtnAudio(this.effect).then()
    }

    private touchEnd() {
        if (!this.interactable) return
        if (this.playAudioOnTouchStart) return
        getAudionMgr().playBtnAudio(this.effect).then()
    }

    private _cacheSprites() {
        let selfSprite = this.getComponent(Sprite) as Sprite
        if (selfSprite) {
            let oneMap: ISpriteColorMapping = {
                color: selfSprite.color, sprite: selfSprite
            }
            this._cacheMapping.push(oneMap)
        }
        if (this.target != this.node) {
            let targetSprite = this.target.getComponent(Sprite) as Sprite
            if (targetSprite) {
                let oneMap: ISpriteColorMapping = {
                    color: targetSprite.color, sprite: targetSprite
                }
                this._cacheMapping.push(oneMap)
            }
        }
        let subSprites = this.getComponentsInChildren(Sprite) as Sprite[]
        subSprites.forEach((sprite)=> {
            let oneMap: ISpriteColorMapping = {
                color: sprite.color, sprite: sprite
            }
            this._cacheMapping.push(oneMap)
        },this
        )

    }
    private setGrayscale() {
        this._cacheMapping.forEach((oneMap)=> {
            if (this.unEnableColor.equals(Color.WHITE)) {
                oneMap.sprite.grayscale = !this._interactable
            } else {
                if (this._interactable) {
                    oneMap.sprite.color = oneMap.color
                } else {
                    oneMap.sprite.color = this.unEnableColor
                }
            }
        },this)
    }
}
